<template>
  <div class="infos">
    <div class="title">{{ goods.name }}</div>
    <div class="price">
      <div class="price-box">
        <div class="item">
          <span>商城价</span
          ><b>{{
            userinfo
              ? "￥" + (specInfo ? specInfo.price : goods.starting_price)
              : "登录可见"
          }}</b>
          <div class="tips">
            累计销量<i>{{ goods.sale }}</i> 起购量<i>{{
              goods.minimum_number
            }}</i>
            限购量<i>{{ goods.inventory }}</i>
          </div>
        </div>
        <div class="item" v-if="goods.price" v-show="false">
          <span>原价</span><b>{{ goods.price }}</b>
        </div>
      </div>
    </div>
    <div class="info" v-if="goods.coupon.length">
      <div class="tips">优惠券</div>
      <div class="coupon">
        <div class="box">
          <div class="item" v-for="(item, index) in goods.coupon" :key="index">
            <span>{{ item.shop_name }} ｜ {{ item.name }}</span>
            {{ item.status ? "已领取" : "领取" }}
          </div>
        </div>
        <icon name="iconxiangyoubeifen16" size="14" />
      </div>
    </div>
    <div class="info">
      <div class="tips">发送至</div>
      <div class="addr" v-if="userinfo && goods.address">
        <div class="city">
          <icon name="icondizhi1" size="12" />
          <span>{{
            goods.address.province + goods.address.city + goods.address.area
          }}</span>
          <icon name="iconxiangyoubeifen16" size="12" />
        </div>
        <div class="ava">
          <!-- <b>有货</b> -->
          <!-- ，下单后立即发货 -->
        </div>
      </div>
    </div>
    <div class="info">
      <div class="tips">邮费</div>
      <div class="youfei">免邮</div>
    </div>
    <div class="line"></div>
    <div
      class="info"
      v-for="(item, index) in goods.specifications"
      :key="index"
    >
      <div class="tips">{{ item.specifications_type || "规格" }}</div>
      <div class="spec">
        <div
          class="item"
          :class="{ active: specSelect[index] === i }"
          @click="selectSpec(index, i)"
          v-for="(spec, i) in item.specifications_option"
          :key="i"
        >
          <img
            v-if="spec.option_img && spec.option_img.length"
            :src="spec.option_img[0].url"
            alt=""
          />
          {{ spec.option_name }}
        </div>
      </div>
    </div>
    <div class="info">
      <div class="tips">数量</div>
      <div class="number">
        <div class="input">
          <b @click="numJian">-</b
          ><input v-model.number="num" type="number" /><b @click="numAdd">+</b>
        </div>
        <span>库存 {{ specInfo ? specInfo.inventory : goods.inventory }}</span>
      </div>
    </div>
    <div class="info">
      <div class="tips"></div>
      <div class="buy">
        <div class="buy_btn" @click="nowBuyGoods">立即购买</div>
        <div class="add_car" @click="addToCart">加入购物车</div>
        <div class="favo" @click="favoGoods">
          <icon
            name="iconshoucangbeifen"
            v-if="goods.goods_collection"
            size="16"
          />
          <icon name="iconshoucang2" v-else size="16" />
          收藏
        </div>
        <div class="flex"></div>
        <div class="phone">手机购买<icon name="ishouji" size="18" /></div>
      </div>
    </div>
    <div class="info" style="margin-bottom: 0">
      <div class="tips"></div>
      <div class="line"></div>
    </div>
    <div class="info">
      <div class="tips"></div>
      <div class="service">
        <div class="item"><icon name="iconxuanxiang" size="12" />送货上门</div>
        <div class="item"><icon name="iconxuanxiang" size="12" />正品保障</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import { mapState } from "vuex";
export default {
  name: "Infos",
  props: {
    goods: Object,
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    specInfo() {
      if (
        this.specSelect.filter((item) => item != null && item != undefined)
          .length < this.goods.specifications.length
      )
        return null;

      let nameArr = [];
      this.specSelect.forEach((i, index) => {
        nameArr.push(
          this.goods.specifications[index].specifications_option[i].option_name
        );
      });

      let spec = null;
      if (!this.goods.specification_attr) return spec;
      this.goods.specification_attr.some((item) => {
        if (nameArr.join("") == item.name_attr.join("")) {
          spec = item;
        }
      });

      return spec;
    },
  },
  data() {
    return {
      num: 1,
      specSelect: [],
    };
  },
  created() {
    this.num = this.goods.minimum_number;
  },
  methods: {
    // 商品数量添加
    numAdd() {
      if (this.num >= this.goods.inventory) this.num = this.goods.inventory;
      else this.num = ++this.num;
    },
    // 商品数量减少
    numJian() {
      if (this.num <= this.goods.minimum_number)
        this.num = this.goods.minimum_number;
      else this.num = --this.num;
    },
    // 商品收藏
    async favoGoods() {
      await api.GOODS_COLLECTION({
        id: [this.goods.id],
        status: this.goods.goods_collection ? 0 : 1,
      });
      this.$emit("updata");
    },
    // 选择商品规格
    selectSpec(index, i) {
      if (this.specSelect[index] === i) {
        this.$set(this.specSelect, index, null);
      } else {
        this.$set(this.specSelect, index, i);
      }
    },
    // 添加至购物车
    async addToCart() {
      let banner = "";
      if (this.goods.is_attr === 2 && this.specInfo == null) {
        return this.$message.error("请选择商品规格");
      }

      await this.$store.dispatch("car/add", {
        id: this.goods.id,
        number: this.num,
        specification_id: this.specInfo ? this.specInfo.id : null,
        specification_name: this.specInfo ? this.specInfo.name : null,
        banner: banner || this.goods.banner[0].url,
      });
      this.$message.success("添加成功");
    },
    nowBuyGoods() {
      // let banner = "";
      if (this.goods.is_attr === 2 && this.specInfo == null) {
        return this.$message.error("请选择商品规格");
      }
      let data = {
        ...this.goods,
        good: [
          Object.assign({}, this.goods, {
            banner: this.goods.banner[0].url,
            price: this.specInfo
              ? this.specInfo.price
              : this.goods.starting_price,
            good_id: this.goods.id,
            goods_quantity: this.num,
            specification_id: this.specInfo ? this.specInfo.id : null,
            specification_name: this.specInfo ? this.specInfo.name : null,
          }),
        ],
      };

      api
        .ORDER_GOODS({
          type: 0,
          cartgood: [data],
        })
        .then((res) => {
          this.$router.push({ name: "OrderCreate" });
          console.log(res);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.infos {
  width: 500px;
  padding-right: 19px;
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin: 20px 0 20px;
  }
  .price {
    width: 500px;
    margin-bottom: 18px;
    .price-box {
      background: linear-gradient(135deg, #ededed 0%, #fbfbfb 100%);
      display: flex;
      flex-direction: column;
      .item {
        padding: 12px;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          color: #666666;
          width: 42px;
          margin-right: 12px;
        }
        b {
          font-size: 24px;
          font-weight: 500;
          color: #d52c1a;
          flex: 1;
        }
        .tips {
          font-size: 14px;
          color: #666666;
          i {
            font-style: normal;
            padding: 0 8px;
            color: #dc2c1a;
          }
        }
      }
    }
  }
  .info {
    display: flex;
    // align-items: center;
    margin-bottom: 16px;
    .tips {
      width: 42px;
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 26px;
      margin-right: 11px;
    }
    .coupon {
      flex: 1;
      display: flex;
      align-items: center;
      .box {
        flex: 1;
        width: 0;
        margin-right: 20px;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          width: 60px;
          height: 100%;
          top: 0;
          right: 0;
          background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            #fff
          );
        }
        .item {
          display: inline-flex;
        }
      }
      .item {
        height: 24px;
        padding: 0 12px;
        background: #ffffff;
        border-radius: 5px;
        border: 1px solid #dc2c1a;
        font-size: 12px;
        font-weight: 400;
        color: #dc2c1a;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 17px;
        margin-left: 12px;
        &:first-child {
          margin-left: 0;
        }
        span {
          padding-right: 8px;
        }
      }
    }
    .addr {
      flex: 1;
      display: flex;
      align-items: center;
      .city {
        cursor: pointer;
        margin-right: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 12px;
        height: 24px;
        background: #f7f7f7;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        span {
          padding: 0 8px;
        }
      }
      .ava {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
    }
    .youfei {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 27px;
    }
    .spec {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item {
        padding: 8px 12px;
        display: flex;
        align-items: center;
        border-radius: 5px;
        border: 1px solid #f0f0f0;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 12px;
        margin-right: 12px;
        cursor: pointer;
        margin-bottom: 5px;
        img {
          width: 30px;
          height: 30px;
          margin-right: 8px;
          // display: none;
        }
        &.active {
          background: #dc2c1a;
          border: 1px solid #dc2c1a;
          color: #fff;
        }
        &.disable {
          background: #e7e7e7;
          border: 1px solid #e7e7e7;
        }
      }
    }
    .number {
      display: flex;
      align-items: center;
      .input {
        width: 116px;
        height: 28px;
        border-radius: 5px;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        margin-right: 12px;
        b {
          width: 30px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f7f7f7;
          border-radius: 4px 0px 0px 4px;
          cursor: pointer;
          user-select: none;
          font-size: 10px;
          line-height: 24px;
        }
        input {
          width: 0;
          padding: 5px;
          flex: 1;
          outline: none;
          border: none;
          text-align: center;
        }
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
    .buy {
      flex: 1;
      display: flex;
      align-items: center;
      .buy_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 44px;
        background: #dc821a;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        margin-right: 16px;
        cursor: pointer;
      }
      .add_car {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 164px;
        height: 44px;
        background: #d52c1a;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        margin-right: 20px;
      }
      .favo {
        cursor: pointer;
        display: flex;
        align-items: center;
        i {
          color: #d52c1a;
          margin-right: 8px;
          position: relative;
          top: -1px;
        }
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
      .phone {
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
        i {
          color: #d52c1a;
          margin-left: 8px;
        }
      }
    }
    .service {
      flex: 1;
      display: flex;
      align-items: center;
      .item {
        i {
          color: #aaaaaa;
          margin-right: 8px;
        }
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
        margin-left: 12px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .line {
    width: 501px;
    background: #dedede;
    height: 2px;
    margin-bottom: 15px;
  }
}
</style>
